<template>
	<view class="pg-content">
		<view class="pg-main">
			<view class="pg-scroll-main">
				<view class="gd-item" v-show="tabIndex == 0">
					<view class="gitem" @click="clickItem('/pages/page/controll')">
						<image src="/static/img/remoter.png"></image>
						<text>遥控</text>
					</view>
					<view class="gitem" @click="clickItem('/pages/page/picture')">
						<image src="/static/img/ele_photo.png"></image>
						<text>电子相册</text>
					</view>
					<view class="gitem" @click="clickItem('/pages/page/fontset')">
						<image src="/static/img/ic_font.png"></image>
						<text>换字体</text>
					</view>
					<view class="gitem" @click="clickItem('/pages/page/whitenoise')">
						<image src="/static/img/white_noice.png"></image>
						<text>白噪音</text>
					</view>
					<view class="gitem" @click="clickItem('/pages/page/backeffect')">
						<image src="/static/img/ic_bgg.png"></image>
						<text>背景特效</text>
					</view>
					<view class="gitem" @click="clickItem('/pages/page/clock')">
						<image src="/static/img/ic_clock.png"></image>
						<text>时钟样式</text>
					</view>
				</view>
				<view class="app-help" v-show="tabIndex == 1">
					<view>1. 如何使用App连接音响</view>
					<view>2. 如何显示歌词</view>
					<view>3. 如何快速打开或关闭背光</view>
					<view>4. 在线客服</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view @click="switchTab(0)">设备</view>
			<view @click="switchTab(1)">设置</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '客厅音响',
				tabIndex: 0
			}
		},
		onLoad() {
			uni.request({
			    url: '/api/getDeviceInfo',
			    success: (res) => {
					if (res.statusCode == 200) {
						uni.setNavigationBarTitle({
							title: res.data.name
						})
					}
			    }
			});
		},
		methods: {
			switchTab(i) {
				this.tabIndex = i;
			},
			clickItem(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			}
		}
	}
</script>

<style>
	.gd-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 36rpx;
		padding: 36rpx;
		justify-content: space-evenly;
	}
	.gitem {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 230rpx;
		border: 1px solid #dedede;
		border-radius: 16rpx;
		justify-content: center;
		text-align: center;
	}
	.gitem image{
		width: 100rpx;
		height: 100rpx;
		display: block;
		margin: 0 auto;
	}
	.gitem:active {
		background-color: #ececec;
	}

	.bitem {
		height: 56px;
		border: 1px solid #999;
	}

	.app-help {
		display: flex;
		flex-flow: column;
		gap: 36px;
		padding: 36px 0 0 36px;
	}

	.footer {
		display: flex;
	}
	.footer view{
		flex: 1;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		border: 2rpx solid #e7e7e7;
	}
	.footer view:active{
		background-color: #ececec;
	}
</style>